<template>
    <div>
        <el-carousel height="150rpx">
            <el-carousel-item v-for="item in 4" :key="item">
                <h3 class="small"> {{ item }}</h3>
            </el-carousel-item>
        </el-carousel>

        <div>
            <div slot="header" class="clearfix">
                <span>新闻列表 </span>
                <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
            </div>
            <div v-for="o in 4" :key="o" class="text item">
                {{ 'xxx新闻信息列表 ' + o }}</div>
        </div>

        <div>
            <div>
                <el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
                </el-image>
            </div>
            <div>
                <h3>鸟</h3>
                <div>
                    <span>售价¥110</span>
                    <span>销量</span>
                </div>
                <el-button type="primary">购买</el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        }
    }
}
</script>
<style>
.el-carousel__item h3{
    color: #475669;
    font-size:14px;
    opacity: 0.75;
    line-height: 150px;
  margin: 0;
}
.el-carousel__item:nth-child(2n){
    background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1){
    background-color: #d3dce6;
}
</style>